<template>
	<view>
		<!-- 返回上一页 -->
		<view class=""
			style="width: 90%;margin:60rpx auto; height: 100rpx; display: flex; align-items: center; ">
			<image @click="toReturn" style="width: 50rpx; height: 50rpx;" src="../../../static/images/goBack.png"></image>
			<span  style="margin-left: 100rpx;">阅读偏好</span>
		</view>
		<!-- 介绍 -->
		<view class="" style="width: 90%;margin: 120rpx auto;">
			<p style="font-size: 40rpx; font-weight: 700; color: #000;">优质小说任您挑选</p>
			<p style=" margin-top: 10rpx; font-size: 24rpx;color: #666666;">选择性别，进入您的专属小说世界</p>
		</view>
		<!-- 选择 -->
		<view class="" style="width: 90%; margin:20rpx auto; height: 200rpx; background: linear-gradient(to bottom, #fefefe,#f7f7ff,  #f0f2ff); border-radius: 10px;"
	            @click="togender(1)"  :class="active ==1? 'active':'active1'" 	>
			  <view class="" style="display: flex; align-items: center;height: 100%;">
			  	<image style="margin-left: 40rpx; width:100rpx; height: 100rpx; border-radius: 50rpx;" :src="dataList[0].img"></image>
				<p style="margin-left: 40rpx; font-weight: 700;">{{dataList[0].name}}</p>
			  </view>
		</view>
		<view class="" style="width: 90%; margin:20rpx auto; height: 200rpx;background: linear-gradient(to bottom, #fefefe,#fff9f9,  #fff5f4); border-radius: 10px;"
		      @click="togender(2)"  :class="active ==2? 'active':'active1'">
			  <view class="" style="display: flex; align-items: center;height: 100%;">
			  	<image style="margin-left: 40rpx; width:100rpx; height: 100rpx; border-radius: 50rpx;" :src="dataList[1].img"></image>
				<p style="margin-left: 40rpx;font-weight: 700;">{{dataList[1].name}}</p>
			  </view>
		</view>
		<!-- 确认 -->
		<view class="" @click="toConfirm" style="margin-top: 100rpx; background: linear-gradient(to right, #fa8732,#e7594a,  #e5574b);
		 width: 70%;color: #ccc;  line-height: 80rpx; text-align: center; 
		 margin: auto;  height: 80rpx; border-radius: 50rpx;">
			<p>确认</p>
		</view>
	</view>
</template>

<script>
	import {getMyEditLike} from '@/http/api.js'
	export default {
		data() {
			return {
				active:1,
				dataList:[{
					img:'../../../static/nan.png',
					name:'男频小说',
				},{
					img:'../../../static/nv.png',
					name:'女频小说',
				}
				]
			};
		},
		methods:{
			MyEditLike(){
				this.userInfo = uni.getStorageSync('userInfo');
				let data ={
					"token":this.userInfo.userinfo.token,
					"like":this.active
				}
				getMyEditLike(data).then((res)=>{
					console.log(res[1].data.data);
				})
			},
			// 返回上一页
			toReturn(){
				  uni.navigateBack();
			},
			togender(index){
				console.log(index,"[][][]");
				this.active = index
				this.MyEditLike()
			},
			// 确认
			toConfirm(){
				uni.$emit('message', {
				  active: this.active,
				  // result: '成功'
				});
				
				
				// console.log(this.active);
				uni.switchTab({
					url: '/pages/user/index'
				});
				
			}
		}
	}
</script>

<style lang="scss">
.active{
	border: 2rpx solid #c26f69;
	
}
.active1{
	border: 2rpx solid #ccc;
	
}
</style>
